<template>
  <div id="app">
    <el-dialog :visible.sync="splitRole" center title="分配权限" width="50%" top="10px">
      <div style="height: 650px;overflow: scroll">
        <el-card style="position: relative">
          <el-collapse v-model="activeNames">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="position: absolute;right:0;top: 10px">全选
            </el-checkbox>
            <el-collapse-item :name="index" v-for="(item,index) in permissions" :key="index">
              <template slot="title">
                <span style="font-size: 14px;margin-right: 10px">{{ item.authorityName }}</span>
              </template>
              <el-checkbox-group v-model="resourceMember" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="a in item.list" :key="a.label" :label="a.label"
                             :value="a.label">{{ a.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
      <span slot="footer">
        <el-button style="color: #374151;background-color:#e0e0e0" @click="splitRole=false">取消</el-button>
        <el-button style="color: #FFFFFF" @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "assignPermissions",
  data() {
    return {
      splitRole: false,
      checkAll: false,
      roleId: "",
      allLists:[],
      isIndeterminate: false,
      activeNames: [0, 1, 2, 3, 4, 5, 6],
      resourceMember: [],
      permissions: []
    }
  },
  created() {
  },
  methods: {
    handleOpen(val) {
      this.roleId = val.roleId
      this.$api.roleGetAuthorityList().then(res => {
        this.permissions = res
        const allLists = res.reduce((acc, item) => {
          return acc.concat(item.list);
        }, []);
        this.allLists=allLists
        this.$api.roleGetAuthorityListByRoleId({roleId: val.roleId}).then(res1 => {
          this.resourceMember = allLists.filter(item => res1.includes(item.label)).map(item => item.label);
          if (this.resourceMember.length == allLists.length) {
           this.checkAll=true
          }else {
           this.checkAll=false
          };
        })
      })
      this.splitRole = true
    },
    submit() {
      let newArray = this.resourceMember
      // console.log(newArray)
      const data = {
        roleId: this.roleId,
        authorityList: [...new Set(newArray)]
      }
      this.$api.roleAssignAuthority(data).then(res => {
        if (res == 1) {
          this.$message.success("操作成功！")
          this.splitRole = false
        }
      })
    },
    handleCheckedCitiesChange(value) {
      // console.log(value)
    },
    handleCheckAllChange(val) {
      this.resourceMember = val ? this.allLists.map(item => item.label) : [];
      this.isIndeterminate = false;
    },
  }
}
</script>

<style scoped lang="less">
.el-card {
  width: 100%;
}
.el-collapse {
  border: none !important;
}
.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.el-checkbox {
  width: 150px;
}
</style>